<script setup lang="ts">
import { imagePath } from '@/libs/file-utils'
import { showShareMask, copy, download } from './data'

const icon_copy = imagePath('community/friend/invite/share-mask/icon-copy.png')
const icon_qrcode = imagePath('community/friend/invite/share-mask/icon-qrcode.png')
</script>

<template>
  <MaskWrapper v-model:show="showShareMask">
    <div
      class="share-mask"
      @click.stop=""
    >
      <div class="title">好友分享</div>

      <div class="btns">
        <div
          class="item"
          @click="copy"
        >
          <div
            class="logo"
            :style="{ backgroundImage: icon_copy }"
          ></div>
          <div class="name">复制链接</div>
        </div>
        <div
          class="item"
          @click="download"
        >
          <div
            class="logo"
            :style="{ backgroundImage: icon_qrcode }"
          ></div>
          <div class="name">保存二维码</div>
        </div>
      </div>

      <div
        class="cancel"
        @click="showShareMask = false"
      >取消</div>
    </div>
  </MaskWrapper>
</template>

<style lang="less" scoped>
.share-mask {
  position: absolute;
  bottom: 106rpx;
  left: 50%;
  transform: translateX(-50%);

  width: 686rpx;

  border-radius: 24rpx;
  background-color: #f7f7f7;

  overflow: hidden;

  .title {
    margin-top: 24rpx;

    font-size: 32rpx;
    line-height: 32rpx;
    text-align: center;
  }

  .btns {
    width: 100%;

    margin: 32rpx 0;

    box-sizing: border-box;
    padding: 0 100rpx;

    display: flex;
    justify-content: space-between;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .logo {
        width: 96rpx;
        height: 96rpx;
      }

      .name {
        margin-top: 16rpx;

        color: #aaa;
        font-size: 28rpx;
        line-height: 32rpx;
      }
    }
  }

  .cancel {
    height: 102rpx;
    background: #FFF;
    box-shadow: 0 -2rpx 8rpx 0 rgba(#000, .19);

    font-size: 32rpx;
    line-height: 102rpx;
    text-align: center;
  }
}
</style>